// =============================================================================
// Respond-to Test Bed
//
// =============================================================================

@import "responder";

@include responder-breakpoints( mobile-portrait 320px,
								 mobile-landscape 480px,
								 tablet-portrait 600px,
								 tablet-landscape 768px,
								 desktop 992px);


$green: #a7e040;

body {
	font: 16px/21px 'Helvetica Neue', Arial, sans-serif;
	@include respond-to(mobile-only) {
		font-size: 95%;
	}
}

.wrapper {
	margin: 0 auto;
	padding: 0 1em;
	max-width: 1000px;
}

tr > td:first-child { width: 80%;  }

// =============================================================================
// Respond-to Media Queries
// =============================================================================

@mixin is-responding {
	// Make it green!
	background: $green;
	color: white;
	// Show isResponding and hide is Inactive
	.isResponding 	{ display: inline; }
	.isInactive 	{ display: none; }
}

.mq-mixins-test {

	width: 100%;

	tbody {

		.response-example {
			text-align: center;
			color: #ccc;
			.isResponding { display: none; }
		}

		// List of classes (which are the same as the breakpoints)
		$classes: mobile, mobile-portrait, mobile-landscape, tablet, tablet-portrait, tablet-landscape, desktop;
		$extends: -only, -and-up, -and-below;

		@each $class in $classes {
			@each $extend in $extends {
				.respond-to-#{$class + $extend} {
					@include respond-to(#{$class + $extend} ) {
						@include is-responding;
					}
				}
			}
		}

		.respond-to-retina {
			@include respond-to('retina') {
				@include is-responding;
			}
		}

		.respond-to-ie {
			@include respond-to(ie) {
				@include is-responding;
			}
		}
	}
}